import React, { Component } from 'react';
import {
  Card,
  Button,
  List,
  Form,
  InputNumber,
  Col,
  Row,
  Input,
  Modal,
  Popconfirm
} from 'antd';
import { connect } from 'dva';
import { Stage, Layer, Text, Image } from 'react-konva';
import { formatMessage } from 'umi/locale';


@connect(({ lc }) => ({ lc }))
class LineCamCalImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.lc.calImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.lc.calImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={800}
        height={900}
      />
    );
  }
}

@connect(({ lc, ds }) => ({ lc, ds }))
@Form.create({})
class LineCameraCalibraion extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    x3: 0,
    y3: 0,
    x4: 0,
    y4: 0,
    verifyPointX: 0, // 验证点的x坐标
    verifyPoinY: 0,  // 验证点的y坐标
    beforeStartHintVisble: false,
  };

  moveToPoint1 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "lc/moveToPoint",
      payload: "1",
    });
  }

  moveToPoint2 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "lc/moveToPoint",
      payload: "2",
    });
  }
  moveToPoint3 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "lc/moveToPoint",
      payload: "3",
    });
  }
  moveToPoint4 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: "lc/moveToPoint",
      payload: "4",
    });
  }


  verifyTransMtx = e => {
    const { dispatch } = this.props;
    const { verifyPointX, verifyPoinY } = this.state;
    dispatch({
      type: "lc/verifyTransMtx",
      payload: [verifyPointX, verifyPoinY]
    });
  };
  cancelStartDevice = e => {
    this.setState({
      beforeStartHintVisble: false,
    })
  }

  clickStartDevice = e => {
    const { dispatch, beforeStartHintVisble } = this.props;
    this.setState({
      beforeStartHintVisble: true,
    });
  }
  startDeviceNormal = e => {
    const { dispatch, beforeStartHintVisble } = this.props;
    this.setState({
      beforeStartHintVisble: false,
    });
    dispatch({
      type: 'lc/clickStartDevice',
      payload: 'normal'
    });
  };
  startDeviceRotate = e => {
    const { dispatch, beforeStartHintVisble } = this.props;
    this.setState({
      beforeStartHintVisble: false,
    });
    dispatch({
      type: 'lc/clickStartDevice',
      payload: 'rotate'
    });
  };

  getImageForLineCamCal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/updateLineCamCalImageSrc',
      payload: null,
    });
    dispatch({
      type: 'lc/getImageForLineCamCal'
    });
  };

  calcTransMtx = e => {
    const { dispatch } = this.props;
    const { x1, y1, x2, y2, x3, y3, x4, y4 } = this.state;
    dispatch({
      type: 'lc/clearTransMtxInfo'
    })
    dispatch({
      type: 'lc/calcTransMtx',
      payload: [x1, y1, x2, y2, x3, y3, x4, y4],
    });
  };

  saveTransMtx = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/saveTransMtx',
    });
  };
  clickStopDevice = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/clickStopDevice',
    });
  };
  openLineCamCalImageDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/openLineCamCalImageDir',
    });
  };
  closeCamDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/closeCamDoorAlarm',
    });
  };
  openCamDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/openCamDoorAlarm',
    });
  };
  render() {
    const {
      camZmcStates,
      cbjZmcStates,
      cutterZmcStates,
    } = this.props.ds;
    const {
      calImageSrc,
      startModalVisble,
      startInfo,
      calibrationError, //标定的误差信息
      calibrationMtx,       // 标定的矩阵
      calibrationOffsetUsed, // 标定的时候使用的激光偏移值
      calibarionRobotUsed,  // 标定时用的裁切机坐标
    } = this.props.lc;
    const { getFieldDecorator, getFieldsValue } = this.props.form;
    const { beforeStartHintVisble } = this.state;
    return (
      <>
        <Card>
          <Card.Grid style={{ width: '65%', textAlign: 'left' }}>
            <Stage width={800} height={900}>
              <Layer>
                {calImageSrc ? <LineCamCalImage width={800} /> : <Image width={800} />}
              </Layer>
            </Stage>

          </Card.Grid>
          <Card.Grid style={{ width: '35%', textAlign: 'left' }}>
            <Col>
              <Row>
                <span>
                  状态:&nbsp;&nbsp;&nbsp;{' '}
                  {(camZmcStates.rs || cbjZmcStates.rs || cutterZmcStates.rs) ? (
                    <font style={{ color: '#FF0000', fontSize: 16 }}>急停中</font>
                  ) : (camZmcStates.run && cbjZmcStates.run && cutterZmcStates.run) ? (
                    <font style={{ color: '#00FF00', fontSize: 16 }}>运行中</font>
                  ) : (
                    <font style={{ color: '#112233', fontSize: 16 }}>待机</font>
                  )}
                </span>

                <Button onClick={this.clickStartDevice} style={{ marginLeft: 10 }} disabled={camZmcStates.run || cbjZmcStates.run || cutterZmcStates.run}>
                  启动设备
                </Button>
                <Button onClick={this.clickStopDevice} style={{ marginLeft: 10 }} disabled={!camZmcStates.run && !cbjZmcStates.run && !cutterZmcStates.run}>
                  停止设备
                </Button>
                <Button onClick={this.getImageForLineCamCal} style={{ marginLeft: 15 }} disabled={!camZmcStates.run || !cbjZmcStates.run || !cutterZmcStates.run}>
                  抓取图片
                </Button>
                <Button onClick={this.reGetImageForLineCamCal} style={{ marginLeft: 15 }} disabled={!camZmcStates.run || !cbjZmcStates.run || !cutterZmcStates.run}>
                  重新拍照
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.openLineCamCalImageDir}>
                  查看标定图片
                </Button>
                <Button onClick={this.closeCamDoorAlarm} style={{ marginLeft: 15 }}>
                  关闭上料门禁报警
                </Button>
                <Button onClick={this.openCamDoorAlarm} style={{ marginLeft: 15 }}>
                  打开上料门禁报警
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <p><font style={{ color: '#FF0000', fontSize: 16 }}>标定使用点的像素坐标</font></p>
                <p>
                  <span>
                    点1:&nbsp;&nbsp;&nbsp;x1
                  </span>
                  <Input
                    onChange={e => this.setState({ x1: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>
                    y1
                  </span>
                  <Input
                    onChange={e => this.setState({ y1: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>
                    点2:&nbsp;&nbsp;&nbsp;x2
                  </span>
                  <Input
                    onChange={e => this.setState({ x2: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>
                    y2
                  </span>
                  <Input
                    onChange={e => this.setState({ y2: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>
                    点3:&nbsp;&nbsp;&nbsp;x3
                  </span>
                  <Input
                    onChange={e => this.setState({ x3: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>
                    y3
                  </span>
                  <Input
                    onChange={e => this.setState({ y3: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>
                    点4:&nbsp;&nbsp;&nbsp;x4
                  </span>
                  <Input
                    onChange={e => this.setState({ x4: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>
                    y4
                  </span>
                  <Input
                    onChange={e => this.setState({ y4: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
              </Row>
              <Row style={{ marginTop: 10 }}>
                <Button onClick={this.calcTransMtx}>
                  标定
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.saveTransMtx}>
                  保存标定结果
                </Button>
                <p style={{ marginTop: 10 }}><font style={{ color: '#FF0000', fontSize: 16 }}>标定结果</font></p>
                <p>
                  误差:&nbsp;&nbsp;x:&nbsp;&nbsp; {calibrationError[0]} y:&nbsp;&nbsp;{calibrationError[1]}
                </p>
                <p>
                  标定矩阵: [[{calibrationMtx[0][0]},{calibrationMtx[0][1]},{calibrationMtx[0][2]}],
                  [{calibrationMtx[1][0]},{calibrationMtx[1][1]},{calibrationMtx[1][2]}]]
                </p>
                <p>
                  标定的时候使用的激光偏移值:&nbsp;&nbsp;offsetX:&nbsp;&nbsp; {calibrationOffsetUsed[0]} offsetY:&nbsp;&nbsp;{calibrationOffsetUsed[1]}
                </p>
              </Row>
              <Row style={{ marginTop: 10 }}>
                <p style={{ marginTop: 10 }}><font style={{ color: '#FF0000', fontSize: 16 }}>标定验证</font></p>
                <span>
                  验证点坐标:&nbsp;&nbsp;X:&nbsp;&nbsp;
                  <Input
                    onChange={e => this.setState({ verifyPointX: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </span>
                <span>
                  &nbsp;&nbsp;Y:&nbsp;&nbsp;
                  <Input
                    onChange={e => this.setState({ verifyPoinY: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </span>
                <Button style={{ marginLeft: 10 }} onClick={this.verifyTransMtx}>
                  验证
                </Button>
              </Row>
              <Row>
                <p style={{ marginTop: 10 }}><font style={{ color: '#FF0000', fontSize: 16 }}>标定用裁切机坐标确认</font></p>
                <p>
                  <span>
                    点1:&nbsp;&nbsp;&nbsp;x1
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[0][0]}
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    y1
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[0][1]}
                  </span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint1} >
                    移动到点1
                  </Button>
                </p>
                <p>
                  <span>
                    点2:&nbsp;&nbsp;&nbsp;x2
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[1][0]}
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    y2
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[1][1]}
                  </span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint2} >
                    移动到点2
                  </Button>
                </p>
                <p>
                  <span>
                    点3:&nbsp;&nbsp;&nbsp;x3
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[2][0]}
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    y3
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[2][1]}
                  </span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint3} >
                    移动到点3
                  </Button>
                </p>
                <p>
                  <span>
                    点4:&nbsp;&nbsp;&nbsp;x4
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[3][0]}
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    y4
                  </span>
                  <span style={{ marginLeft: 10 }}>
                    {calibarionRobotUsed[3][1]}
                  </span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint4}>
                    移动到点4
                  </Button>
                </p>

              </Row>
            </Col>

          </Card.Grid>
        </Card>
        <Modal
          title={'设备启动提示框'}
          visible={startModalVisble}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeStartModal}>
              关闭启动提示框
            </Button>,
            <Button
              style={{ marginLeft: 8 }}
              onClick={this.clickStopDevice}
              disabled={!cbjZmcStates.run && !camZmcStates.run && !cutterZmcStates.run}
            >
              停止
            </Button>,

            <Button
              style={{ marginLeft: 8 }}
              onClick={this.clickResetDevice}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              总复位
            </Button>,
          ]}
        >
          <p>{startInfo}</p>
        </Modal>

        <Modal
          title={'横排和竖排提示框'}
          visible={beforeStartHintVisble}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button onClick={this.cancelStartDevice}>
              取消
            </Button>,
            <Button
              style={{ marginLeft: 10 }}
              onClick={this.startDeviceNormal}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              竖排方式启动
            </Button>,
            <Button
              style={{ marginLeft: 10 }}
              onClick={this.startDeviceRotate}
              disabled={cbjZmcStates.run || camZmcStates.run || cutterZmcStates.run}
            >
              横排方式启动(旋转)
            </Button>,

          ]}
        >
          <p>请确认排版方式之后再进行标定,排版方式不同,使用的标定矩阵不同.</p>
        </Modal>
      </>
    );
  }
}
export default LineCameraCalibraion;
